<template>
	<div class="contents">
		<div class="content_left">
			<div class="pagetab"></div>

			<ItemWrap class="content_left-top" title="新生性别分布">
				<LeftTop ref="left_top" />
			</ItemWrap>
			<ItemWrap class="content_left-center content_lr-item" title="新生学历分布">
				<LeftCenter ref="left_center" />
			</ItemWrap>
			<ItemWrap class="content_left-bottom" title="新生姓氏分布" style="padding: 0 10px 16px 10px">
				<LeftBottom ref="left_bottom" />
			</ItemWrap>
		</div>
		<div class="content_center">

			<CenterTop ref="center_top" />

			<!-- 监听region-selected事件 -->
			<CenterMap class="content_center-bottom" @region-selected="handleRegionSelected" />
		</div>
		<div class="content_right">
			<ItemWrap class="content_right-top content_lr-item" title="实时报道数据">
				<RightTop />
			</ItemWrap>
			<ItemWrap class="content_right-center content_lr-item" title="新生身高分布" style="padding: 0 10px 16px 10px">
				<RightCenter ref="right_center" />
			</ItemWrap>
			<ItemWrap class="content_right-bottom content_lr-item" title="新生生日分布">
				<RightBottom ref="right_bottom" />
			</ItemWrap>
		</div>
	</div>
</template>

<script>
import LeftTop from './left-top.vue'
import LeftCenter from "./left-center.vue";
import LeftBottom from "./left-bottom.vue";
import CenterMap from "./center-map.vue";
import CenterTop from "./center-top.vue";
import RightTop from "./right-top.vue";
import RightCenter from "./right-center.vue";
import RightBottom from "./right-bottom.vue";

export default {
	components: {
		LeftTop,
		LeftCenter,
		LeftBottom,
		CenterMap,
		RightTop,
		RightCenter,
		RightBottom,
		CenterTop,
	},
	data() {
		return {

		};
	},
	filters: {
		numsFilter(msg) {
			return msg || 0;
		},
	},
	created() {
	},

	mounted() { },
	methods: {
		handleRegionSelected(regionCode) {
			this.$refs.center_top.getDataByRegionCode(regionCode);
			this.$refs.left_top.getData(regionCode);
			this.$refs.left_center.getData(regionCode);
			this.$refs.left_bottom.getData(regionCode);
			this.$refs.right_center.getData(regionCode);
			this.$refs.right_bottom.getData(regionCode);
		},
	},
};
</script>
<style lang="scss" scoped>
// 内容
.contents {

	.content_left,
	.content_right {
		width: 450px;
		box-sizing: border-box;
		// padding: 16px 0;
	}

	.content_center {
		width: 950px;
	}

	// 左右两侧各三个块的默认属性
	.content_lr-item {
		height: 310px; // 均分高度
	}

	.content_left-top {
		height: 250px;
	}

	.content_left-bottom {
		height: 370px;
	}

	.content_center-bottom {
		height: 680px;
		width: 100%;
	}

	// 中间
	.content_center {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.content_center-top {
		height: 250px;
	}

	//左边 右边 结构一样
	.content_left,
	.content_right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: relative;


	}
}


@keyframes rotating {
	0% {
		-webkit-transform: rotate(0) scale(1);
		transform: rotate(0) scale(1);
	}

	50% {
		-webkit-transform: rotate(180deg) scale(1.1);
		transform: rotate(180deg) scale(1.1);
	}

	100% {
		-webkit-transform: rotate(360deg) scale(1);
		transform: rotate(360deg) scale(1);
	}
}
</style>
